import { defineConfig,ConfigEnv,UserConfig,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";//解析.vue文件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import * as path from "path";

import postcssImport from "postcss-pxtorem"  // 用来将px转换成rem适配

// 按需自动倒入element UI
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

// vite默认只会编译ts
export default defineConfig(({mode}: ConfigEnv): UserConfig => {
    const root: string = process.cwd();
    const env: Record<string, string> = loadEnv(mode, root);
    return {
        plugins:[
            vue(),
            VueSetupExtend(),
            ViteImageOptimizer({
                jpg:{
                    quality:90,
                },
                png:{
                    quality:100,
                }
            }), // 图片压缩
            // element UI 按需加载,自动导入 ...
            AutoImport({
                imports: ["vue", "vue-router"], //生成auto-imports.d.ts文件
                // eslintrc: { enabled: true } //第一次启动生成就不用生成了 生成.eslintrc-auto-import.json文件
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
        resolve: {
            alias: [
                // 配置和rollup一样
                { find: "@", replacement: path.resolve(__dirname, "src") }
            ]
        },
        css: {
            preprocessorOptions: {
                scss: {
                    api:"modern-compiler", // 版本弃用方法提示
                    additionalData: `@use "@/styles/variables.scss" as *;` // 导出全局变量和 mixin
                }
            },
            postcss: {
                plugins: [
                    postcssImport({
                        rootValue: 192, // 这里的rootValue就是你的设计稿大小
                        propList: ['*'],
                        unitPrecision: 6,
                        selectorBlackList: ['.no-rem', 'no-rem'],// 要忽略的选择器并保留为px。
                        exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
                    })
                ]
            }
        }
    }
})